<template>
  <div >
    <form-head @onSubmit="onSubmit" :is_change="is_change"/>
    <el-form ref="form" :rules="rules" :model="form" label-width="90px" class="layout-all form-width">
      <el-form-item label="分组:" prop="group">
        <el-select
          v-model="form.group"
          :disabled="disabled"
          placeholder="请选择分组"
        >
          <el-option
            v-for="item in group_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="键key:" prop="key">
        <el-input
          v-model="form.key"
          :disabled="disabled"
          placeholder="请输入键key"
        />
      </el-form-item>

      <el-form-item
        v-if="form.data_type === 'text'"
        label="值value:"
        prop="value"
      >
        <el-input v-model="form.value" placeholder="请输入值value" />
      </el-form-item>
      <el-form-item
        v-if="form.data_type === 'file'"
        label="值value:"
        prop="value"
      >
        <el-input type="textarea" v-model="form.value" placeholder="请输入值value" />
      </el-form-item>
      <el-form-item
        v-else-if="form.data_type === 'img'"
        label="值value:"
        prop="value"
      >
        <upload-pic :thumb="form.value" @update:thumb="form.value=$event" width="100"/>
      </el-form-item>

      <el-form-item
        v-else-if="form.data_type === 'check'"
        label="值value:"
        prop="value"
      >
        <el-checkbox v-model="form.value"></el-checkbox>
      </el-form-item>

      <el-form-item
        v-else-if="form.data_type === 'color'"
        label="值value:"
        prop="value"
      >
        <el-color-picker v-model="form.value"></el-color-picker>
      </el-form-item>

      <el-form-item v-if="form.data_type === 'date'" label="值value:" prop="value">
        <el-date-picker
          v-model="form.value"
          type="datetime"
          placeholder="选择日期时间"
          default-time="12:00:00"
          @change="changedateTime()"
        />
      </el-form-item>

      <el-form-item label="描述:" prop="description">
        <el-input
          v-model="form.description"
          :autosize="{ minRows: 2, maxRows: 4 }"
          type="textarea"
          placeholder="请输入描述"
        />
      </el-form-item>
      <el-form-item label="数据类型:" prop="data_type">
        <el-select
          v-model="form.data_type"
          :disabled="disabled"
          placeholder="请选择数据类型"
        >
          <el-option
            v-for="item in type_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name:"config_form",
  computed: {
    group() {
      return this.$store.state.user.config_group
    },
  },
  data() {
    return {
      is_change: undefined,
      disabled: false,
      id: 0,
      form: {},
      group_options: [],
      type_options: [],
      rules: {
        key: [{ required: true, message: "请输入值key", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
        group:[{ required: true, message: "请选择分组", trigger: "blur" }],
        data_type: [
          { required: true, message: "请输入数据类型", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.id = (this.$route.params && this.$route.params.id)||0
    this.$setTagsViewTitle(this.id)
    this.init_into();
  },
  methods: {
    // 日期修改
    changedateTime() {
      const date = new Date(this.form.value);
      this.form.value =
        date.getFullYear() +
        "-" +
        (date.getMonth() + 1) +
        "-" +
        date.getDate() +
        " " +
        date.getHours() +
        ":" +
        date.getMinutes() +
        ":" +
        date.getSeconds();
    },
    // 提交
    onSubmit(formName) {
      const form = this.form;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          form.id = this.id;
          if (this.form.data_type === "check") {
            this.form.value === false
              ? this.form.value = '0'
              : this.form.value = '1';
          }
          this.get("/admin/Config/save", form, "POST").then((e) => {
            this.$msg_ok("success", "保存成功");
            this.$back();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log("submit!");
    },
    // 返回
    bk() {
      this.$router.back();
    },

    // 获取当前数据
    init_into() {
      this.get("/admin/Config/info?id=" + this.id, "POST").then((e) => {
        this.type_options = [];
        const type = e.data_type_arr;
        const keys = Object.keys(type);
        for (let i in keys) {
          this.type_options.push({ value: keys[i], label: type[keys[i]] });
        }
        this.form = e.info.tpl;
        if (this.form.data_type === "check") {
          this.form.value === '0'
            ? this.form.value = false
            : this.form.value = true;
        }
        if(this.form.group==''){
          this.form.group=this.group
        }
        this.group_options = e.group_arr_select;
        setTimeout(()=>{this.is_change=false},100)
      });
    },
  },
  watch: {
    form:{
      handler (val, oldVal) {
	      if(this.is_change!=undefined)
        	this.is_change=true
      },
      deep:true
    }
  }
};
</script>

<style lang="scss">
.layout-all {
  margin: 10px;
}
.change_uploader {
  .el-upload--picture-card {
    width: 245px !important;
    height: 70px !important;
    i {
      position: relative;
      bottom: 35px;
    }
  }
}
</style>
